<template>
    <div>
        <!-- header区域 -->
        <van-nav-bar
        title="文章详情"
        left-arrow
        @click-left="onClickLeft"
        class="header"
        >
        </van-nav-bar>

        <!-- 文章信息区域 -->
        <div class="article-container" >
            <!-- 加载 -->
            <div v-if="articleDetail.title===undefined">
              <van-loading type="spinner" color="#1989fa" vertical>文章疯狂加载中...</van-loading>
            </div>
            <!-- 文章 -->
            <div v-else>
                <!-- 文章标题 -->
              <div class="article-title">{{articleDetail.title}}</div>

              <!-- 用户信息 -->
              <van-cell :title="articleDetail.aut_name" value="内容" >
                  <!-- 左侧图标 -->
                  <template #icon>
                      <img :src="articleDetail.aut_photo" alt="" class="avatar">
                  </template>
                  <!-- 右侧内容 -->
                  <template #default>
                      <div>
                          <van-button @click="followedFn" size="small"  type="info" v-if="is_followed">已关注</van-button>
                          <van-button @click="followedFn" size="small" icon="plus" plain type="info" v-else>关注</van-button>
                      </div>
                  </template>
              </van-cell>

              <!-- 分割线 -->
              <van-divider></van-divider>

              <!-- 文章内容 -->
              <div class="art-content" v-html="articleDetail.content"></div>
            </div>

            <!-- 分割线 -->
            <van-divider></van-divider>

            <!-- 底部点赞 -->
            <div class="bottom-box">
                <!-- attribute: -1:无态度 0:点赞 1:已点赞 -->
                <van-button icon="good-job" type="danger" size="small"
                v-if="is_loveArticle" @click="loveFn">已点赞</van-button>
                <van-button icon="good-job-o" type="danger" plain
                size="small" v-else @click="loveFn">点赞</van-button>
            </div>

            <!-- 底部评论 -->
            <div>
              <ArticleComment></ArticleComment>
            </div>
        </div>
    </div>
</template>

<script>
import {
  articleDetailAPI, followingArticleAPI,
  cancleFollowingArticleAPI, likingAPI, cancleLikingAPI
} from '@/api'
import ArticleComment from '@/views/article/ArticleComment.vue'
export default {
  name: 'ArticleDetail',
  components: {
    ArticleComment
  },
  data () {
    return {
      // 文章详情对象
      articleDetail: {},
      // 是否关注作者
      is_followed: false,
      // 是否给文章点赞
      is_loveArticle: false
    }
  },
  created () {
    this.getArticleDetail()
  },
  methods: {
    // 获取文章详情数据
    async getArticleDetail () {
      const { data: res } = await articleDetailAPI(this.$route.query.id)
      //   console.log(res.data)
      this.articleDetail = res.data
      // 关注
      this.is_followed = res.data.is_followed
      // 点赞
      if (res.data.attitude === 1) this.is_loveArticle = true
    },

    // 点击关注/已关注按钮
    async followedFn () {
      // 让is_followed 取反
      this.is_followed = !this.is_followed
      // 页面显示关注(此时未关注)---》调用接口关注
      if (this.is_followed) {
        const res = await followingArticleAPI({ target: this.articleDetail.aut_id })
        console.log(res)
      } else { // 页面显示已关注(此时已关注)---》调用接口取消关注
        await cancleFollowingArticleAPI(this.articleDetail.aut_id)
      }
    },

    // 给文章点赞和取消点赞
    async loveFn () {
      this.is_loveArticle = !this.is_loveArticle
      // 取反后为真，说明原来为未点赞，调用点赞接口
      if (this.is_loveArticle) {
        const res = await likingAPI(this.articleDetail.art_id)
        console.log('已点赞', res)
      } else { // 取反后为假，说明原来已点赞，此时调用取消点赞接口
        const res = await cancleLikingAPI(this.articleDetail.art_id)
        console.log(res)
      }
    },

    // 头部返回箭头的点击事件
    onClickLeft () {
      this.$router.back()
    }

  }
}
</script>

<style lang="less" scoped>
.van-nav-bar{
    background-color: #007BFF;
     /deep/ .van-icon{
        color:#fff !important;
     }
}
.header{
    position: fixed;
    width: 100%;
}
/deep/ .van-nav-bar__title{
    color:#fff;
}

.article-container{
    padding:48px 10px 10px 10px;
    .article-title{
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0;
    }
    .van-cell{
        padding: 5px 0;
        &::after{
            display: none;
        }
        .avatar{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f8f8f8;
            margin-right: 8px;
            border: none;
        }
    }
    .art-content{
        font-size: 12px;
        line-height: 24px;
        width: 100%;
        overflow-x: scroll;
        word-break: break-all;
        /deep/ img{
            width: 100%;
        }
        /deep/ pre{
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    }
    .bottom-box{
        display: flex;
        justify-content: center;
    }
}
</style>
